<!-- 文字逐渐显示插件 -->
<template>
	<div id="twChart">
		<div class="text" v-html="value"></div>
		<div class="but">
			<button type="button" @click="stop()">停止</button>
			<button type="button" @click="go()">继续</button>
			<button type="button" disabled v-if="!this.value">清空</button>
			<button type="button" @click="clear()" v-else>清空</button>
			<button type="button" @click="recover()">恢复</button>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['text', 'time'],
		data() {
			return {
				index: 0,
				value: '',
				recover_value: '',
				recover_index: 0,
				setInterval,
			}
		},
		methods: {
			str() {
				if (this.index < this.text.length) {
					if (this.text.charAt(this.index) == '<') {
						var index; //判断h5属性标签的长度
						for (var i = 0; i < this.endindex.length; i++) {
							if (this.endindex[i] > this.index) {
								index = this.endindex[i] - this.index;
								break
							}
						}
						this.index += index;
					} else if (this.text.charAt(this.index - 1) == '>') {
						var index; //判断结束属性下标
						var i; //判断起始属性下标
						for (var i = this.startindex.length; i >= 0; i--) {
							if (this.startindex[i] < this.index - 1) {
								index = this.index;
								i = this.startindex[i];
								break
							}
						}
						var property = this.text.substring(i, index); //截取字符串
						this.value += property;
						this.value += this.text.charAt(this.index);
					} else {
						this.value += this.text.charAt(this.index);
					}
					this.index++;
				} else {
					clearInterval(this.setInterval)
				}
			},
			stop() {
				clearInterval(this.setInterval)
			},
			go() {
				this.setInterval = setInterval(() => {
					this.str();
				}, this.time)
			},
			clear() {
				this.recover_index = this.index;
				this.recover_value = this.value;
				this.value = '';
				this.index = 0;
			},
			recover() {
				this.value = this.recover_value;
				this.index = this.recover_index;
			}
		},
		computed: {
			endindex() {
				var endindex = [];
				for (var i = 0; i < this.text.length; i++) {
					if (this.text[i] == '>') {
						endindex.push(i)
					}
				}
				return endindex;
			},
			startindex() {
				var endindex = [];
				for (var i = 0; i < this.text.length; i++) {
					if (this.text[i] == '<') {
						endindex.push(i)
					}
				}
				return endindex;
			}
		},
		mounted() {
			this.setInterval = setInterval(() => {
				this.str();
			}, this.time)
		}
	}
</script>

<style scoped="scoped">
	#twChart {
		width: 95%;
		background-color: #fff;
		margin: auto;
		padding-top: .3rem;
		border-radius: 10px;
	}

	.text {
		margin: auto;
		text-align: center;
		color: #494a4b;
		font-size: .35rem;
		line-height: .4rem;
	}

	.but {
		width: 100%;
		height: 2rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	button {
		display: block;
		width: 1rem;
		height: .5rem;
		font-size: .3rem;
		margin: 0 .3rem;
	}
</style>
